<template>
    <div>
        <van-swipe :height="200" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in swiperList" :key="item.id">
                <img :src="item.img" alt="">
            </van-swipe-item>
        </van-swipe>
        <!-- 宫格 -->
        <van-grid :border="false" :column-num="3">
            <van-grid-item to="/newslist">
                <img src="../../assets/images/menu1.png" alt="">
                <p>新闻资讯</p>
            </van-grid-item>
            <van-grid-item to="/photo/list">
                <img src="../../assets/images/menu2.png" alt="">
                <p>图片分享</p>
            </van-grid-item>
            <van-grid-item to="/goods/list">
                <img src="../../assets/images/menu3.png" alt="">
                <p>商品购买</p>
            </van-grid-item>
            <van-grid-item>
                <img src="../../assets/images/menu4.png" alt="">
                <p>留言反馈</p>
            </van-grid-item>
            <van-grid-item>
                <img src="../../assets/images/menu5.png" alt="">
                <p>视频专区</p>
            </van-grid-item>
            <van-grid-item>
                <img src="../../assets/images/menu6.png" alt="">
                <p>联系我们</p>
            </van-grid-item>
        </van-grid>
    </div>
</template>

<script>
export default {
  data() {
    return {
      swiperList: []
    };
  },
  methods: {
    async getSwiperList() {
      let result = await this.$http.get("/api/getlunbo");
      this.swiperList = result.data.message;
    }
  },
  mounted() {
    this.getSwiperList();
  }
};
</script>

<style lang="less" scoped>
div {
  background-color: red;
  text-align: center;
}
.van-swipe-item {
  text-align: center;
  img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
.van-grid-item {
  img {
    width: 60px;
  }
  p {
    font-size: 14px;
  }
}
</style>